<template>
  <div>
    <p>HTML模板语法包含两个部分（{{  }} 指令）</p>
    <p>姓名:{{ data.str }}</p>
    <p>数量:{{ data.num }}</p>
    <p>姓名:{{ data.person.name }}---年龄:{{ data.person.age}}</p>
    <input type="button" value="修改str的值" @click="fn">
    <input type="button" value="修改num的值" @click="fn1">
    <input type="button" value="修改person的值" @click="fn2">
  </div>
</template>

<script setup lang="ts">

import { reactive } from 'vue';

let data = reactive({
  str:'张三',
  num:100,
  person:{
    name:'李四',
    age:20
  }
})

function fn(){
  data.str="王五"
}

function fn1(){
  data.num=200
}

function fn2(){
  data.person.name="赵六"
  data.person.age=30
}




</script>

<style scoped>

</style>